什麼是 ?? (Nullish coalescing operator)

?? 是一種邏輯運算子，只有當左側的值為 null 或 undefined 才會回傳右側的值，換句話說 ?? 會讓左側所有被定義好的值保留下來，不多說直接看 Code 感覺一下。

const foo = null ?? 'nullish' // 'nullish'
const bar = undefined ?? 'nullish' // 'nullish'
const baz = '' ?? 'nullish' // ''
const qux = 0 ?? 'nullish' // 0
const quux = NaN ?? 'nullish' // NaN
const quuz = false ?? 'nullish' // false

?? 和 || 的相同和不同之處？

?? 和 || 是不是看起來有 87% 像？那那個 13% 不一樣的地方在哪裡呢？我們來比較一下

相同的部分

對 null, undefined 還有其他 truthy value 的處理。

不同的部分

兩者的差別在於對 falsy value 的處理 falsy value 指的是一個值在運算中會被判斷為 False 的值，在 JS 中 falsy value 只包含以下六種。

• null
• undefined
• ""
• 0
• false
• NaN

沒錯 {} 和 [] 在 JS 中都是 truthy value

相比於 || ，使用 ?? 會保留 false, "", "0" & NaN 這四種 falsy value

?? 和 || 我該選擇使用哪一個？

|| 的功能是去除掉所有 falsy value 同時給予一個 default 值。

所以只有當我們想要保留左側數值為 false, "", "0" & NaN 這些預先定義好的 falsy value 時，才一定要選擇使用 ??，不然使用 ?? 和 || 從邏輯上其實是沒什麼差別的。

參考資料

Nullish coalescing operator (??)
Nullish coalescing operator '??'
The Ultimate Guide to the ES2020 Nullish Coalescing Operator